<template>
    <div class="fullScreen" :key="$route.fullPath">
      <dv-loading style="
          color: #fff;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        " v-if="loading">加载中，请稍后......</dv-loading>
      <dv-full-screen-container v-else style="width: 100%; height: 100%" class="bg">
        <!-- 顶部 -->
        <div class="top">
          <dv-decoration-8 class="left_line" style="width: 25%; height: 5rem" />
          <dv-decoration-10 style="width: 25%; height: 5px" />
          <dv-decoration-6 style="width: 40%; height: 10px; margin-top: 6rem" />
          <dv-decoration-10 style="width: 25%; height: 5px; transform: rotateY(180deg)" />
          <dv-decoration-8 class="right_line" :reverse="true" style="width: 25%; height: 5rem" />
          <div class="title">智慧能源管理平台</div>
          <div class="weather">
            <span>
              <i @click="back" class="el-icon-s-home" style="
                  font-size: 2rem;
                  margin-right: 1rem;
                  cursor: pointer;
                  color: aqua;
                  vertical-align: bottom;
                "></i>
              {{ dataWeather.city }}
              {{ dataWeather.weathertemp }}
              <div class="svg">
                <img v-for="(item, index) in src" :key="index" style="
                    transform: translateX(2rem);
                    filter: drop-shadow(aqua -2rem 0px 0px);
                  " :src="require('@/assets/weatherIcons/' + item.id + '.svg')" alt="" />
              </div>
              {{ dataWeather.peraturetemp }}
            </span>
          </div>
          <div class="datatime">
            <span>
              <img style="margin-right: 1rem; vertical-align: top" src="../../assets/image/clock.svg" alt="" />{{
                dataTime.dateYear }} {{ dataTime.dateWeek }}
              {{ dataTime.dateDay }}
            </span>
          </div>
        </div>
        <!-- 中间内容 -->
        <div class="container">
          <!-- 左侧 -->
          <div class="container_left">
            <div class="online" style="
                color: #fff;
                width: 100%;
                height: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
              ">
              <div id="water" ref="water" style="width: 80%; height: 100%"></div>
            </div>
            <div class="online" style="
                width: 100%;
                height: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
              ">
              <div id="four" ref="four" style="width: 80%; height: 100%"></div>
            </div>
          </div>
          <!-- 中间 -->
          <div class="container_middle">
            <dv-border-box-12 class="middle_item" :key="key">
              <div class="count">
                <div class="count_left">
                  <div class="count_left_item">
                    <span style="font-size: 2rem; margin-bottom: 1%">{{
                      income
                    }}</span>
                    <span>总流水</span>
                  </div>
                  <div class="count_left_item">
                    <span style="font-size: 2rem; margin-bottom: 1%">{{
                      yearincome
                    }}</span>
                    <span>年流水</span>
                  </div>
                  <div class="count_left_item">
                    <span style="font-size: 2rem; margin-bottom: 1%">{{
                      monthincome
                    }}</span>
                    <span>月流水</span>
                  </div>
                </div>
                <div class="count_right">
                  <div class="count_right_item">
                    <span style="font-size: 2rem; margin-bottom: 1%">{{
                      tenantNum
                    }}</span>
                    <span>租户数</span>
                  </div>
                  <div class="count_right_item">
                    <span style="font-size: 2rem; margin-bottom: 1%">{{
                      tenantNum2
                    }}</span>
                    <span>厂商数</span>
                  </div>
                  <div class="count_right_item">
                    <span style="font-size: 2rem; margin-bottom: 1%">{{
                      landlord
                    }}</span>
                    <span>房东数</span>
                  </div>
                </div>
                <div id="panel" ref="panel" style="width: 100%; height: 100%"></div>
                <div class="count_total">
                  <span style="font-size: 2rem; margin-bottom: 1%">{{
                    total
                  }}</span>
                  <span>设备总数</span>
                </div>
              </div>
            </dv-border-box-12>
          </div>
          <!-- 右侧 -->
          <div class="container_right">
            <div class="pai" style="width: 100%; height: 100%">
              <div id="pie2" ref="pie2" style="width: 100%; height: 100%"></div>
              <div class="right">
                <el-radio-group size="mini" @input="dateChange2" v-model="subject">
                  <el-radio-button label="tenant">厂商</el-radio-button>
                  <el-radio-button label="product">生产</el-radio-button>
                </el-radio-group>
                <el-radio-group size="mini" @input="dateChange2" v-model="operation">
                  <el-radio-button label="month">月</el-radio-button>
                  <el-radio-button label="week">周</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="income">
            <div class="bar" style="height: 100%; width: 100%">
              <div class="right">
                <el-radio-group size="mini" @input="dateChange" v-model="timeData.dateOperation">
                  <el-radio-button label="year">年</el-radio-button>
                  <el-radio-button label="month">月</el-radio-button>
                </el-radio-group>
                <el-date-picker size="mini" v-model="timeData.date"
                  :type="timeData.dateOperation == 'year' ? 'year' : 'month'" :clearable="false" value-format="yyyy-MM-dd"
                  placeholder="选择日期" @change="dateChange">
                </el-date-picker>
              </div>
              <div id="bar" ref="bar" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </div>
      </dv-full-screen-container>
    </div>
  </template>
  
  <script>
  import {
    getCountApi,
    getHardwareApi,
    getDeviceApi,
    getIncomeApi,
    getRank1Api,
  } from "../../api/system/dashboard";
  import { formatTime1 } from "../../utils/index";
  import { weatherOption } from "../../config/weatherOption/index";
  import "echarts-liquidfill";
  export default {
    name: "fullScreen",
    data() {
      return {
        online: "",
        onlineNum: "",
        allCount: [],
        xAxis: [],
        crash: [],
        zubi: [],
        weixin: [],
        aliPay: [],
        timeData: {
          date: "",
          dateOperation: "month",
        },
        tenantNum: "",
        tenantNum2: "",
        landlord: "",
        income: "",
        yearincome: "",
        monthincome: "",
        total: "",
        bindNum: "",
        countData: [],
        src: [{ id: 100 }],
        key: 1,
        loading: true,
        currentName: "中国地图",
        dataWeather: {
          city: "北京市",
          dayweather: "晴",
          nightweather: "多云",
          weathertemp: "晴", // 根据时间判断选白天还是晚上的天气
          nighttemp: "3℃",
          daytemp: "15℃",
          peraturetemp: "3℃~15℃", // 根据时间判断选白天还是晚上的温度
        },
        fromPath: "",
        timeSet: null, // 定时器
        dataTime: {
          dateDay: null,
          dateYear: null,
          dateWeek: null,
          weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        },
        rankTitle: [],
        rankValue: [],
        operation: "month",
        subject: "product",
      };
    },
  
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        //  这里的vm指的就是vue实例，可以用来当做this使用
        vm.fromPath = from.path; //获取上一级路由的路径
      });
    },
    mounted() {
      this.getWeather();
      this.getDateTime();
      setTimeout(() => {
        this.loading = false;
      }, 1000);
      setTimeout(() => {
        this.getCount();
        this.getTime();
        this.getDevice();
        this.getRank(this.operation, this.subject);
      }, 1001);
  
      let that = this;
      window.addEventListener("fullscreenchange", function () {
        if (!that.checkFull()) {
          that.$router.push(that.fromPath);
        } else {
        }
      });
    },
    destroyed() {
      window.removeEventListener("fullscreenchange", function () {
        if (!that.checkFull()) {
          that.$router.push(that.fromPath);
        } else {
        }
      });
      clearInterval(this.timeSet);
    },
    methods: {
      dateChange2() {
        this.getRank(this.operation, this.subject);
      },
      // 获取排名
      getRank(operation, subject) {
        getRank1Api(operation, subject).then((res) => {
          if (res.code == 200) {
            if (res.data.length !== 0) {
              this.rankTitle = [];
              this.rankValue = [];
              res.data.reverse().forEach((item) => {
                this.rankTitle.push(item.name);
                this.rankValue.push(item.count);
              });
              this.initPie2();
            }
          }
        });
      },
      getTime() {
        // 获取当前日期
        let year = new Date().getFullYear();
        let month = new Date().getMonth() + 1;
        let day = new Date().getDate();
        if (month < 10) {
          month = "0" + String(Number(month));
        }
        if (day < 10) {
          day = "0" + String(Number(day));
        }
        this.timeData.date = year + "-" + month + "-" + day;
        this.getIncome(this.timeData.date, this.timeData.dateOperation);
      },
      // 设备数量图表
      initPanel() {
        let myChart = this.$echarts.init(this.$refs.panel);
        let colorSet = {
          color1: {
            bg: "rgba(0,194,255,.2)",
            bar: this.$echarts.graphic.LinearGradient(0, 1, 1, 0, [
              {
                offset: 0,
                color: "#00FFFF",
              },
              {
                offset: 0.4,
                color: "rgba(0,255,255,.7)",
              },
              {
                offset: 0.8,
                color: "rgba(0,255,255,.3)",
              },
            ]),
            pin: "#22E4D2",
            circle1: "#00D2FF",
            circle2: this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
              {
                offset: 0,
                color: "#1EC5EC",
              },
              {
                offset: 0.5,
                color: "#3DC8DA",
              },
              {
                offset: 0.8,
                color: "#52CACD",
              },
            ]),
          },
        };
        let baseColor = colorSet.color1;
        let option = {
          graphic: {
            type: "text",
            left: "center",
            top: "55%",
            z: 100,
            style: {
              fill: "#fff",
              text: "绑定设备数",
              font: "bolder 16px Microsoft YaHei",
            },
          },
          tooltip: {
            show: true,
          },
          title: {
            text: this.bindNum,
            left: "center",
            top: "40%",
            triggerEvent: true,
            textStyle: {
              fontSize: 30,
              fontFamily: "Microsoft YaHei",
              color: "#fff",
            },
          },
          angleAxis: {
            show: false,
            max: (Number(this.total) * 360) / 265, //总数
            type: "value",
            startAngle: 223,
            splitLine: {
              show: false,
            },
          },
          barMaxWidth: 20,
          radiusAxis: {
            show: false,
            type: "category",
            z: 10,
          },
          polar: {
            //圆环大小
            radius: "157%",
          },
          series: [
            // 进度条
            {
              type: "bar",
              data: [
                {
                  value: Number(this.bindNum), //绑定数
                  itemStyle: {
                    color: baseColor.bar,
                  },
                },
              ],
              barGap: "-50%",
              coordinateSystem: "polar", //环形柱状图
              roundCap: true,
              z: 2,
              animationDuration: 1500,
            },
            // 进度条外框 仪表盘
            {
              name: "外部进度条",
              type: "gauge",
              center: ["50%", "50%"],
              radius: "90%",
              startAngle: 226,
              splitNumber: 10,
              axisLine: {
                lineStyle: {
                  color: [[1, baseColor.bg]],
                  width: 40,
                },
              },
              axisLabel: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              itemStyle: {
                show: false,
              },
              pointer: {
                show: false,
              },
            },
            // 刻度
            {
              name: "内部部刻度",
              type: "gauge",
              radius: "60%",
              min: 0,
              max: 100,
              splitNumber: 10,
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: false,
                lineStyle: {
                  width: 4,
                  color: [[1, "rgba(0,0,0,0)"]],
                },
              },
              axisTick: {
                show: true,
                splitNumber: 10,
                lineStyle: {
                  color: baseColor.pin,
                  width: 2,
                },
                length: -20,
              },
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: true,
                length: -30,
                lineStyle: {
                  width: 6,
                  color: baseColor.pin,
                },
              },
              detail: {
                show: false,
              },
              pointer: {
                show: false,
              },
            },
            // 圆环
            {
              name: "数量",
              type: "pie",
              animation: false,
              hoverAnimation: false,
              clockwise: false,
              radius: ["50%", "50%"],
              center: ["50%", "50%"],
              data: [10],
              itemStyle: {
                normal: {
                  borderWidth: 6,
                  borderType: "solid",
                  borderColor: baseColor.circle1,
                  opacity: 0.5,
                },
              },
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: "14",
                  },
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
            },
            // 内部圆
            {
              name: "设备总数",
              type: "pie",
              animation: false,
              hoverAnimation: false,
              clockwise: false,
              radius: "40%",
              center: ["50%", "50%"],
              data: [this.total],
              itemStyle: {
                normal: {
                  color: baseColor.circle2,
                },
              },
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: "14",
                  },
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },
      // 获取时间
      getDateTime() {
        this.timeSet = setInterval(() => {
          this.dataTime.dateYear = formatTime1(new Date(), "yyyy-MM-dd");
          this.dataTime.dateWeek = this.dataTime.weekday[new Date().getDay()];
          this.dataTime.dateDay = formatTime1(new Date(), "HH: mm: ss");
        }, 1000);
      },
      // 返回
      back() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.$router.push(this.fromPath);
      },
      // 判断全屏
      checkFull() {
        //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
        //火狐浏览器
        var isFull =
          document.mozFullScreen ||
          document.fullScreen ||
          //谷歌浏览器及Webkit内核浏览器
          document.webkitIsFullScreen ||
          document.webkitRequestFullScreen ||
          document.mozRequestFullScreen ||
          document.msFullscreenEnabled;
        if (isFull === undefined) {
          isFull = false;
        }
        return isFull;
      },
      // 获取天气
      getWeather() {
        this.$.get({
          //这里的url不能写到data对象的外面
          url: "https://api.asilu.com/weather_v2/",
          dataType: "jsonp", // 请求方式为jsonp
          success: (data) => {
            if (data.status === "1") {
              let currTime = new Date().getHours();
              let dailyForecast = data.forecasts[0].casts[0];
              let city = data.forecasts[0].city;
              let daytemp = dailyForecast.daytemp + "℃";
              let nighttemp = dailyForecast.nighttemp + "℃";
              let weathertemp = "";
              let peraturetemp = "";
              if (currTime >= 6 && currTime < 18) {
                weathertemp = dailyForecast.dayweather;
                peraturetemp =
                  dailyForecast.nighttemp + "℃~" + dailyForecast.daytemp + "℃";
              } else {
                weathertemp = dailyForecast.nightweather;
                peraturetemp =
                  dailyForecast.nighttemp + "℃~" + dailyForecast.daytemp + "℃";
              }
              let message = { id: weatherOption.weatherCode[weathertemp] };
              this.$set(this.src, 0, message);
              this.dataWeather = {
                city,
                daytemp,
                nighttemp,
                weathertemp,
                peraturetemp,
              };
            }
          },
        });
      },
      // 获取总数
      getCount() {
        getCountApi().then((res) => {
          if (res.code == 200) {
            if (res.data.length !== 0) {
              this.countData = res.data;
              this.tenantNum = res.data[0].count;
              this.tenantNum2 = res.data[1].count;
              this.landlord = res.data[2].count;
              this.total = res.data[3].count;
              this.bindNum = res.data[4].count;
              this.income = res.data[6].count;
              this.yearincome = res.data[7].count;
              this.monthincome = res.data[8].count;
              this.initPanel();
            }
          }
        });
      },
      // 获取收入
      getIncome(date, dateOperation) {
        getIncomeApi(date, dateOperation).then((res) => {
          if (res.code == 200) {
            if (res.data.length !== 0) {
              this.xAxis = res.data[0].keys;
              this.crash = res.data[0].values;
              this.zubi = res.data[1].values;
              this.weixin = res.data[2].values;
              this.aliPay = res.data[3].values;
              this.allCount = [];
              for (let index = 0; index < this.xAxis.length; index++) {
                this.allCount.push(
                  (
                    Number(this.crash[index]) +
                    Number(this.zubi[index]) +
                    Number(this.weixin[index]) +
                    Number(this.aliPay[index])
                  ).toFixed(2)
                );
              }
              this.initBar();
            }
          }
        });
      },
      // 切换年月
      dateChange() {
        if (this.timeData.date.split("-")[1] < 10) {
          this.timeData.date =
            this.timeData.date.split("-")[0] +
            "-" +
            "0" +
            String(Number(this.timeData.date.split("-")[1])) +
            "-" +
            this.timeData.date.split("-")[2];
        }
        if (this.timeData.date.split("-")[2] < 10) {
          this.timeData.date =
            this.timeData.date.split("-")[0] +
            "-" +
            this.timeData.date.split("-")[1] +
            "-" +
            "0" +
            String(Number(this.timeData.date.split("-")[2]));
        }
        this.getIncome(this.timeData.date, this.timeData.dateOperation);
      },
      // 获取设备统计
      getDevice() {
        let that = this;
        getDeviceApi().then((res) => {
          if (res.code == 200) {
            this.typeList = [];
            res.data.forEach((item) => {
              this.typeList.push({
                value: item.count,
                name: item.name,
              });
              if (item.name == "4G") {
                let num = 0;
                item.detail.forEach((it) => {
                  if (it.name == "在线") {
                    that.onlineNum = it.count;
                  }
                  num = Number(num) + Number(it.count);
                });
                that.online = Number(that.onlineNum / Number(num));
              }
            });
            that.initWater();
            that.initFour();
          }
        });
      },
      // 收入
      initBar() {
        let myChart = this.$echarts.init(this.$refs.bar, "dark");
        let option = {
          backgroundColor: "transparent",
          animation: true,
          animationDuration: 2000,
          title: {
            text: "流水详情",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          // color: ["#223174", "#452564", "#003A63", "#504529"],
          color: ["#3973D0", "#1DB6E2", "#E4D445", "#A9DA84"],
          // color: ["rgba(158,84,208,.6)", "rgba(80,109,242,.6)", "rgba(218,187,75,.6)", "#FAB16C"],
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          legend: {
            left: "10%",
            top: "0%",
            data: ["微信", "现金", "支付宝", "租币", "总流水"],
            selected: {
              总流水: false,
            },
          },
          xAxis: {
            type: "category",
            data: this.xAxis,
          },
          yAxis: [
            {
              type: "value",
            },
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "微信",
              type: "bar",
              stack: "total",
              label: {
                show: false,
              },
              emphasis: {
                focus: "series",
              },
              data: this.weixin,
            },
            // -----------------------------------------------------------------------------------------------------------
  
            {
              name: "现金",
              type: "bar",
              stack: "total",
              label: {
                show: false,
              },
              emphasis: {
                focus: "series",
              },
              data: this.crash,
            },
  
            {
              name: "支付宝",
              type: "bar",
              stack: "total",
              label: {
                show: false,
              },
              emphasis: {
                focus: "series",
              },
              data: this.aliPay,
            },
            {
              name: "租币",
              type: "bar",
              stack: "total",
              label: {
                show: false,
              },
              emphasis: {
                focus: "series",
              },
              data: this.zubi,
            },
            {
              type: "line",
              name: "总流水",
              smooth: 0.6,
              label: {
                normal: {
                  show: true, //显示数值
                  position: "top", //  位置设为top
                  formatter: "{c}",
                  textStyle: { color: "#00FFFF" }, //设置数值颜色
                },
              },
              itemStyle: {
                normal: {
                  color: "#00FFFF", // 设置背景颜色为透明
                },
              },
              data: this.allCount,
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },
      // 水球，，电表在线数
      initWater() {
        let myChart = this.$echarts.init(this.$refs.water);
        let option = {
          title: {
            text: "在线率",
            textStyle: {
              color: "#fff",
            },
            left: "center",
            bottom: "30%",
          },
          backgroundColor: "transparent", //背景色
          series: [
            {
              type: "liquidFill", //水位图
              radius: "80%", //显示比例
              center: ["50%", "50%"], //中心点
              amplitude: 25, //水波振幅
              data: [this.online, this.online, this.online], // data个数代表波浪数
              color: ["#00FFFF"], //波浪颜色
              backgroundStyle: {
                borderWidth: 8, //外边框
                borderColor: "#00FFFF", //边框颜色
                color: "transparent", //边框内部填充部分颜色
              },
              label: {
                //标签设置
                normal: {
                  position: ["50%", "50%"],
                  formatter: this.online, //显示文本,
                  textStyle: {
                    fontSize: "2rem", //文本字号,
                    color: "#fff",
                  },
                },
              },
              outline: {
                show: false, //最外层边框显示控制
              },
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },
      // 4g 蓝牙分类
      initFour() {
        let myChart = this.$echarts.init(this.$refs.four);
        let option = {
          title: {
            text: "设备统计",
            textStyle: {
              color: "#fff",
            },
            left: "center",
            top: "center",
          },
          color: ["#2FF2E8", "#3973D0"],
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            right: "0%",
            top: "10%",
            textStyle: {
              color: "#fff",
              fontSize: 16,
              padding: [0, 0, 0, 10],
            },
          },
          series: {
            type: "pie",
            radius: ["50%", "80%"],
            center: ["50%", "50%"],
            emphasis: {
              scale: true,
            },
            label: {
              show: false,
              position: "center",
            },
            data: this.typeList,
          },
        };
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },
      // 排名
      initPie2() {
        let myChart = this.$echarts.init(this.$refs.pie2, "dark");
        let option = {
          title: {
            text: "新增排行榜",
            textStyle: {
              color: "#fff",
            },
          },
          backgroundColor: "transparent",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            show: false,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
            show: false,
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          yAxis: {
            type: "category",
            data: this.rankTitle,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          series: [
            {
              animationDuration: 2000,
              animationEasing: "cubicInOut",
              label: {
                show: true,
                position: "right",
              },
              type: "bar",
              barMaxWidth: 40,
              data: this.rankValue,
              itemStyle: {
                color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#02948D" },
                  { offset: 0.5, color: "#02BDB1" },
                  { offset: 1, color: "#00FDE7" },
                ]),
              },
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },
    },
  };
  </script>
  
  
  <style  lang="scss" scoped>
  @media screen and(min-width:1024px) {
    .fullScreen {
      overflow: auto;
      width: 100%;
      height: 100vh;
      background: url(../../assets/image/pageBg.png) no-repeat;
      background-size: 100% 100%;
      padding: 1% 0;
  
      .dv-loading {
        /deep/ .loading-tip {
          margin-top: 0.8rem;
        }
      }
  
      .bg {
        height: inherit;
        position: relative;
  
        .top {
          width: 100%;
          display: flex;
          height: 10%;
          justify-content: space-between;
          align-items: center;
          position: relative;
  
          .title {
            position: absolute;
            left: 50%;
            bottom: 50%;
            color: #fff;
            font-weight: bold;
            font-size: 1.8rem;
            transform: translate(-50%, 50%);
          }
  
          .weather {
            position: absolute;
            left: 4.1rem;
            top: 0.4rem;
            color: #fff;
            font-size: 1.2rem;
  
            span {
              display: flex;
              align-items: center;
  
              .svg {
                width: 2rem;
                height: 2rem;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 8px;
  
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
  
          .datatime {
            font-size: 1.2rem;
            position: absolute;
            right: 4.1rem;
            top: 0.7rem;
            color: #fff;
          }
        }
  
        .container {
          width: 100%;
          height: 90%;
          // height: calc(100vh - 7rem);
          padding-top: 0.9rem;
          display: flex;
          flex-wrap: wrap;
  
          .container_left {
            width: 25%;
            height: 50%;
            // background: red;
  
            .left_one {
              height: 6rem;
  
              /deep/ .border-box-content {
                display: flex;
                align-items: center;
                justify-content: space-around;
  
                .user {
                  display: flex;
                  flex-direction: column;
                  // justify-content: center;
                  align-items: center;
  
                  .user_name {
                    color: aqua;
                  }
  
                  .user_num {
                    font-size: 2rem;
                    color: #fff;
                  }
                }
              }
            }
          }
  
          .container_middle {
            width: 50%;
            height: 50%;
  
            .middle_item {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
  
              .count {
                width: 100%;
                height: 97%;
                position: relative;
  
                .count_total {
                  position: absolute;
                  bottom: 1%;
                  left: 50%;
                  transform: translate(-50%, 0);
                  width: 20%;
                  height: 20%;
                  // background: url("../../assets/dataView/title.png") no-repeat;
                  background-size: 100% 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  color: #00ffff;
                  font-size: 1rem;
                }
  
                .count_left {
                  width: 30%;
                  height: 98%;
                  // background: #fff;
                  position: absolute;
                  left: 1%;
                  top: 50%;
                  transform: translate(0, -50%);
                  display: flex;
                  justify-content: space-around;
                  flex-direction: column;
                  align-items: center;
  
                  .count_left_item {
                    width: 80%;
                    height: 30%;
                    background: url("../../assets/dataView/title_bg.png") no-repeat;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    color: #00ffff;
                    font-size: 1rem;
                  }
                }
  
                .count_right {
                  width: 30%;
                  height: 98%;
                  position: absolute;
                  right: 1%;
                  top: 50%;
                  transform: translate(0, -50%);
                  display: flex;
                  justify-content: space-around;
                  flex-direction: column;
                  align-items: center;
  
                  .count_right_item {
                    width: 80%;
                    height: 30%;
                    background: url("../../assets/dataView/title_bg.png") no-repeat;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    color: #00ffff;
                    font-size: 1rem;
                  }
                }
              }
            }
          }
  
          .container_right {
            width: 25%;
            height: 50%;
  
            .pai {
              position: relative;
  
              .right {
                z-index: 999;
                position: absolute;
                right: 5%;
                top: 0%;
  
                /deep/ .el-radio-button {
                  .el-radio-button__inner {
                    background: transparent;
                    color: #00ffff;
                    border: 1px solid #00ffff;
                  }
                }
  
                /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
                  background: #294453;
                  color: #00ffff;
                  border: 1px solid #00ffff;
                }
              }
            }
          }
  
          .income {
            width: 100%;
            height: 50%;
  
            .bar {
              width: 100%;
              height: 100%;
              padding: 1% 0;
              position: relative;
  
              .right {
                z-index: 999;
                position: absolute;
                right: 5%;
                top: 3%;
  
                /deep/ .el-radio-button {
                  .el-radio-button__inner {
                    background: transparent;
                    color: #00ffff;
                    border: 1px solid #00ffff;
                  }
                }
  
                /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
                  background: #294453;
                  color: #00ffff;
                  border: 1px solid #00ffff;
                }
              }
            }
          }
        }
      }
    }
  }
  
  @media screen and(max-width:1024px) {
    .fullScreen {
      overflow: auto;
      width: 1920px;
      height: 100vh;
      background: url(../../assets/image/pageBg.png) no-repeat;
      background-size: 100% 100%;
      padding: 1% 0;
  
      .dv-loading {
        /deep/ .loading-tip {
          margin-top: 0.8rem;
        }
      }
  
      .bg {
        height: inherit;
        position: relative;
  
        .top {
          width: 100%;
          display: flex;
          height: 10%;
          justify-content: space-between;
          align-items: center;
          position: relative;
  
          .title {
            position: absolute;
            left: 50%;
            bottom: 50%;
            color: #fff;
            font-weight: bold;
            font-size: 1.8rem;
            transform: translate(-50%, 50%);
          }
  
          .weather {
            position: absolute;
            left: 4.1rem;
            top: 0.4rem;
            color: #fff;
            font-size: 1.2rem;
  
            span {
              display: flex;
              align-items: center;
  
              .svg {
                width: 2rem;
                height: 2rem;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 8px;
  
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
  
          .datatime {
            font-size: 1.2rem;
            position: absolute;
            right: 4.1rem;
            top: 0.7rem;
            color: #fff;
          }
        }
  
        .container {
          width: 100%;
          height: 90%;
          padding-top: 0.9rem;
          display: flex;
          flex-wrap: wrap;
  
          .container_left {
            width: 25%;
            height: 50%;
  
            .left_one {
              height: 6rem;
  
              /deep/ .border-box-content {
                display: flex;
                align-items: center;
                justify-content: space-around;
  
                .user {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
  
                  .user_name {
                    color: aqua;
                  }
  
                  .user_num {
                    font-size: 2rem;
                    color: #fff;
                  }
                }
              }
            }
          }
  
          .container_middle {
            width: 50%;
            height: 50%;
  
            .middle_item {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
  
              .count {
                width: 100%;
                height: 97%;
                position: relative;
  
                .count_total {
                  position: absolute;
                  bottom: 1%;
                  left: 50%;
                  transform: translate(-50%, 0);
                  width: 20%;
                  height: 20%;
                  // background: url("../../assets/dataView/title.png") no-repeat;
                  background-size: 100% 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  color: #00ffff;
                  font-size: 1rem;
                }
  
                .count_left {
                  width: 30%;
                  height: 98%;
                  position: absolute;
                  left: 1%;
                  top: 50%;
                  transform: translate(0, -50%);
                  display: flex;
                  justify-content: space-around;
                  flex-direction: column;
                  align-items: center;
  
                  .count_left_item {
                    width: 80%;
                    height: 30%;
                    background: url("../../assets/dataView/title_bg.png") no-repeat;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    color: #00ffff;
                    font-size: 1rem;
                  }
                }
  
                .count_right {
                  width: 30%;
                  height: 98%;
                  position: absolute;
                  right: 1%;
                  top: 50%;
                  transform: translate(0, -50%);
                  display: flex;
                  justify-content: space-around;
                  flex-direction: column;
                  align-items: center;
  
                  .count_right_item {
                    width: 80%;
                    height: 30%;
                    background: url("../../assets/dataView/title_bg.png") no-repeat;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    color: #00ffff;
                    font-size: 1rem;
                  }
                }
              }
            }
          }
  
          .container_right {
            width: 25%;
            height: 50%;
  
            .pai {
              position: relative;
  
              .right {
                z-index: 999;
                position: absolute;
                right: 5%;
                top: 0%;
  
                /deep/ .el-radio-button {
                  .el-radio-button__inner {
                    background: transparent;
                    color: #00ffff;
                    border: 1px solid #00ffff;
                  }
                }
  
                /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
                  background: #294453;
                  color: #00ffff;
                  border: 1px solid #00ffff;
                }
              }
            }
          }
  
          .income {
            width: 100%;
            height: 50%;
  
            .bar {
              width: 100%;
              height: 100%;
              padding: 1% 0;
              position: relative;
  
              .right {
                z-index: 999;
                position: absolute;
                right: 5%;
                top: 3%;
  
                /deep/ .el-radio-button {
                  .el-radio-button__inner {
                    background: transparent;
                    color: #00ffff;
                    border: 1px solid #00ffff;
                  }
                }
  
                /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
                  background: #294453;
                  color: #00ffff;
                  border: 1px solid #00ffff;
                }
              }
            }
          }
        }
      }
    }
  }
  </style>
  
  
  